import React, {Component} from 'react';
import {formatMessage, FormattedMessage} from '@/utils/locale';
import {Checkbox, Alert, Icon} from 'antd';
import Login from '@/components/Login';
import styles from './Login.less';
import {Link} from "react-router-dom";
import {loginAction} from "@/models/login/actionCreator";
import {connect} from "react-redux";
import {loginSagaAction} from "@/models/login/actionCreator";
import {LOGIN} from "../../models/login/const";

const {Tab, UserName, Password, Mobile, Captcha, Submit} = Login;

@connect(({login, loading}) => ({login, submitting: loading.login}))
class LoginPage extends Component {
  state = {
    type: 'account',
    autoLogin: true,
  };

  onTabChange = type => {
    this.setState({type});
  };

  onGetCaptcha = () =>
    this.loginForm.validateFields(['mobile'], {}, (err, values) => {
      if (err) {
      } else {
        const {dispatch} = this.props;
        dispatch(loginAction(values.mobile))
          .then()
          .catch();
      }
    });


  handleSubmit = (err, values) => {
    const {type} = this.state;
    if (!err) {
      const {dispatch} = this.props;
      dispatch(loginSagaAction({...values, type}));
    }
  };

  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };

  renderMessage = content => (
    <Alert style={{marginBottom: 24}} message={content} type="error" showIcon/>
  );

  render() {
    const {login, submitting} = this.props;
    const {type, autoLogin} = this.state;
    return (
      <div className={styles.main}>
        <Login
          defaultActiveKey={type}
          onTabChange={this.onTabChange}
          onSubmit={this.handleSubmit}
          ref={form => {
            this.loginForm = form;
          }}
        >
          <Tab key="account" tab={formatMessage({id: 'app.login.tab-login-credentials'})}>
            {login.status === 'error' &&
            login.type === 'account' &&
            !submitting &&
            this.renderMessage(formatMessage({id: 'app.login.message-invalid-credentials'}))}
            <UserName name="username" placeholder="手机号"/>
            <Password
              name="password"
              placeholder="密码"
              onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}
            />
          </Tab>
          {/*<Tab key="mobile" tab={formatMessage({id: 'app.login.tab-login-mobile'})}>*/}
          {/*{login.status === 'error' &&*/}
          {/*login.type === 'mobile' &&*/}
          {/*!submitting &&*/}
          {/*this.renderMessage(*/}
          {/*formatMessage({id: 'app.login.message-invalid-verification-code'})*/}
          {/*)}*/}
          {/*<Mobile name="mobile"/>*/}
          {/*<Captcha*/}
          {/*name="captcha"*/}
          {/*countDown={120}*/}
          {/*onGetCaptcha={this.onGetCaptcha}*/}
          {/*getCaptchaButtonText={formatMessage({id: 'form.captcha'})}*/}
          {/*getCaptchaSecondText={formatMessage({id: 'form.captcha.second'})}*/}
          {/*/>*/}
          {/*</Tab>*/}
          <div>
            <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
              <FormattedMessage id="app.login.remember-me"/>
            </Checkbox>
            <a style={{float: 'right'}} href="">
              <FormattedMessage id="app.login.forgot-password"/>
            </a>
          </div>
          <Submit loading={submitting}>
            <FormattedMessage id="app.login.login"/>
          </Submit>
          <div className={styles.other}>
            <Link className={styles.register} to="/user/register">
              <FormattedMessage id="app.login.signup"/>
            </Link>
          </div>
        </Login>
      </div>
    );
  }
}

export default LoginPage;
